@charset "UTF-8";

$fontSize:23;

@function r($px){
	@return $px/2/$fontSize+rem;
}

@mixin setPm($name,$val...){
	// ...是固定写法,若干个的意思
	$max:length($val);//3
	$str:"";
	// 从1开始到 length3结束
	@for $i from 1 through $max{
		// 第一次循环
		$value:nth($val,$i)/2/$fontSize;
		$str:#{$str+$value}rem;
		@if $i < $max{
			$str:#{$str+" "};
		}
	}
	#{$name}:$str;
	
}
.box-top {
    padding-top: 88px;
}
.header {
    width: 100%;
    height: 32px;
    background: #333;
    .header-main {
        max-width: 1221px;
        margin: 0 auto;
        height: 32px;
        .header-main-left,.header-main-right{
            font-family: 'avantgardeextlititcregular';
            height: 32px;
            line-height: 32px;
            color: #fff;
            float: left;
            text-transform: uppercase;
            p {
                padding: 0;
                margin: 0;
                height: 32px;
                line-height: 32px;
                display: block;
                float: left;
                color: #ccc;            
                font-size: 12px;
                &:first-child {
                    &::after{
                        width: 1px;
                        height: 16px;
                        background: #666;
                        display: block;
                        float: right;
                        content: '';
                        margin-top: 8px; 
                        margin-left: 12px;
                        margin-right: 12px;   
                    }
                }
            }
        }
        .header-main-right{
            float: right;
        }
    }
}
.banner {
    width: 100%;
    padding-bottom: 48%;
    background: #999;
    position: relative;
    .swiper-container {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        .swiper-slide {
            text-align: center;
            font-size: 18px;
            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
            -webkit-flex-wrap: wrap ;
            -ms-flex-wrap: wrap ;
            flex-wrap: wrap ;
            background: #000;
            .slide-container{
                width: 100%;
                height: 100%;
                position: relative;
                background: #000;
                img.banner-bg-a01 {
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    top: 0;
                    left: 0;
                    -webkit-animation: kwFade 8s infinite;
                    animation: kwFade 8s infinite;
                }
                img.banner-pro-a01{
                    width: 30%;
                    position: absolute;
                    top: 16%;
                    left: 47%;
                }
                .descrip{
                    max-width: 1221px;
                    margin: 0 auto;
                    height: 100%;
                    position: relative;
                    z-index: 999;
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: -webkit-flex;
                    display: flex;
                    -webkit-box-pack: center;
                    box-pack:center;
                    box-align:center;
                    -ms-flex-pack: center;
                    -webkit-box-align: center;
                    -ms-flex-align: center;
                    -webkit-align-items: center;
                    align-items: center;
                    -webkit-flex-wrap: wrap ;
                    -ms-flex-wrap: wrap ;
                    flex-wrap: wrap ;
                    text-align: left;
                }
                .descrip01 h3 {
                    font-family: 'avantgardeextlititcregular';
                    font-size: r(96);
                    color: #fff;
                    margin-bottom: 40px;
                    margin-left: 60px;
                }
                .descrip01 p {
                    font-family: 'avantgardeextlititcregular';
                    font-size: r(36);
                    color: #aaa;
                    margin-top: 20px;
                    margin-left: 60px;
                }
                .descrip01 button {
                    font-family: 'avantgardeextlititcregular';
                    font-size: r(32);
                    padding: 12px 48px;
                    background: none;
                    border: 1px solid #fff;
                    color: #fff;
                    margin-top: 40px;
                    margin-left: 60px;
                    text-transform: uppercase;
                }
            }
        }
        h6{
           color: #fff; 
        }
        .swiper-pagination-bullet {
            width: 80px;
            height: 2px;
            background: #fff;
            border-radius: unset;
            opacity: 0.5;
        }
        .swiper-pagination-bullet-active {
            background: #000;
            opacity: 1;
        } 
    }
    
}
.banner-nav {
    position: absolute;
    top: 32px;
    left: 0;
    width: 100%;
    height: 88px;
    z-index: 9;
    background: rgba(255,255,255,0.0);
    -webkit-transition: all 0.15s ease-in;
    transition: all 0.15s ease-in;
    .nav-menu {
        width: r(64);
        height: r(64);
        position: absolute;
        right: 10px;
        top: 4px;
        background: #333;
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
        flex-wrap: wrap;
        -webkit-flex-wrap:wrap;
        padding-top: 4px;
        padding-bottom: 4px;
        box-sizing: border-box;
        border-radius: 3px;
        z-index: 2;
        display: none;
        span {
            width:r(48);
            height: r(4);
            border-radius: 8px;
            background: #fff;
        }
    }
    .nav-menu-mobile {
        width: r(480);
        height: 0;
        overflow: hidden;
        opacity: 0;
        position: absolute;
        right: 10px;
        top: 0;
        z-index: 1;
        background: #333;
        box-sizing: border-box;
        transition: all 0.35s ease-in;
        -webkit-transition: all 0.35s ease-in;
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
    }
    .nav-menu-mobile-logo {
        display: none;
    }
    .banner-inner {
        max-width: 1221px;
        margin: 0 auto;
        .logo {
            width: 110px;
            height: 60px;
            margin-top: 9px;
            float: left;
            position: relative;
            img {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                transition: 0.2s ease;
                -webkit-transition: 0.2s ease;
            }
            .logo-imga{
                opacity: 0;
            }
            .logo-imgb{
                opacity: 1;
            }
        }
        .nav {
            height: 88px;
            float: right;
            ul{
                float: left;
                li {
                    float: left;
                    height: 88px;
                    margin: 0;
                    margin-left: 52px;
                    line-height: 88px;
                    cursor: pointer;
                    text-align: center;
                    h4 {
                        line-height: 88px;
                        font-size: 16px;
                        margin: 0;
                        padding: 0;
                        color: #fff;
                        -webkit-transition: all 0.2s ease-in;
                        transition: all 0.2s ease-in;
                    }
                    .nav-add {
                        position: absolute;
                        display: none;
                        opacity: 0;
                        top: 88px;
                        left: 0;
                        width: 100%;
                        height: 200px;
                        -webkit-transition: all 0.2s ease-in;
                        transition: all 0.2s ease-in;
                        background: hsla(0, 0, 100%, 0.95);
                        z-index:1;
                        ul {
                            display:block;
                            left: 50%;
                            max-width: 1221px;
                            height: 300px;
                            margin: 0 auto;
                            position: relative;
                            margin-left: -610px;
                            display: -webkit-box;
                            display: -ms-flexbox;
                            display: -webkit-flex;
                            display: flex;
                            -webkit-box-pack: center;
                            -ms-flex-pack: center;
                            // -webkit-justify-content: center;
                            // justify-content: center;
                            -webkit-box-align: center;
                            -ms-flex-align: center;
                            -webkit-align-items: center;
                            align-items: center;
                            li {
                                margin-right: 20px;
                                margin-left: 0;
                                width: 186px;
                                height: 230px;
                                line-height: 88px;
                                background: none;
                                .nav-pro-img {
                                    width: 186px;
                                    height: 190px;
                                    float: left;
                                    img {
                                        width: 160px;
                                        margin-top: 15px;
                                    }
                                }
                                h5 {
                                    font-family: Arial, Helvetica, sans-serif;
                                    color: #333;
                                    font-size: 16px;
                                    line-height: 20px;
                                }
                            }
                        }
                    }
                    h5 {
                        display: block;
                        font-size: r(24);
                        margin-top: 10px;
                        line-height: 30px;
                    }
                }
                .nav-com {
                    position: relative;
                    display: block;
                    .nav-com-box {
                        display: none;
                        opacity: 0;
                        position: absolute;
                        height: auto;
                        background: rgba($color: #000, $alpha: 0.45);
                        line-height: 32px;
                        color: #fff;
                        top: 48px;
                        left: 0;
                        width: 100%;
                        border: 1px solid rgba($color: #ffffff, $alpha: 0.20);
                        border-radius: 6px;
                        transition: all 0.2s ease-in;
                        -webkit-transition: all 0.2s ease-in;
                        &>a {
                            color: #fff;
                            font-size: 14px;
                            line-height: 32px;
                            width: 100%;
                            display: inline-block;
                        }
                        &>a:first-child{
                            border-bottom: 1px solid #666;
                        }
                    }
                    .nav-com-boxIn {
                        animation: navComIn 0.2s ease-in both;
                        -webkit-animation: navComIn 0.2s ease-in both;
                        
                    }
                    .nav-com-boxOut {
                        animation: navComOut 0.2s ease-in both;
                        -webkit-animation: navComOut 0.2s ease-in both;
                    }
                }
            }
            &>ul>li {
              margin-left: 0;
              padding-left: 26px;
              padding-right: 26px;  
            }
        }
    }
}
.products {
    max-width: 1200px;
    margin: 0 auto;
    padding-top: r(50);
    padding-bottom: r(50);
    text-align: center;
    h2 {
        font-family: 'avantgardeextlititcregular'; 
        font-size: 72px;
        text-align: center;
        color: #aaa;
        text-transform: uppercase; 
        line-height: 130px;
        position: relative;
        display: inline-block;
        span {
            font-family: 'folio_bk_btbook';
            color: #000;
            font-weight: bold;
        }
        &::before{
            position: absolute;
            width: 120px;
            height: 1px;
            background: #000;
            left: -160px;
            top: 50%;
            content: '';
        }
        &::after{
            position: absolute;
            width: 120px;
            height: 1px;
            background: #000;
            right: -160px;
            top: 50%;
            content: '';
        }
    }
    .products-main {
        padding-bottom: 50%;
        position: relative;
        .img-center {
            cursor: pointer;
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
            -webkit-flex-wrap: wrap ;
            -ms-flex-wrap: wrap ;
            flex-wrap: wrap ;
            position: relative;
            img {
                transition: all 0.5s ease;    
                -webkit-transition: all 0.5s ease;
            }
            h3 {
                font-family: 'avantgardeextlititcregular';
                position: absolute;
            }
        }
        .pro-parta{
            img {
                width:100%;
                }
            h3 {
                width: 60%;
                font-size: r(48);
                top: 5%;
                left: 6%;
                z-index: 6;
                text-align: left;
            }
            &:hover {
                img{
                    -webkit-transform: scale3d(1.03, 1.03, 1.03);
                    transform: scale3d(1.03, 1.03, 1.03); 
                }
            }
        }
        .pro-partb{
            img {
                width:90%;
            }
            h3 {
                font-size: r(32);
                top: 8%;
                left: 8%;
                z-index: 6;
            }
            &:hover {
                img{
                    -webkit-transform: scale3d(1.03, 1.03, 1.03);
                    transform: scale3d(1.03, 1.03, 1.03); 
                }
            }
        }
        .pro-partc{
            img {
                width:100%;
                height: 100%;
            }
            h3 {
                font-size: r(32);
                top: 8%;
                left: 8%;
                color: #fff;
                z-index: 6;
            }
            overflow: hidden;
            &:hover {
                img{
                    -webkit-transform: scale3d(1.03, 1.03, 1.03);
                    transform: scale3d(1.03, 1.03, 1.03); 
                }
            }
        }
        .pro-partd{
            img {
                width:56%;
            }
            h3 {
                font-size: r(48);
                top: 8%;
                left: 5%;
                z-index: 6;
            }
            &:hover {
                img{
                    -webkit-transform: scale3d(1.03, 1.03, 1.03);
                    transform: scale3d(1.03, 1.03, 1.03); 
                }
            }
        }
        .products-main-left{
            width: 50%;
            padding-bottom: 50%;
            position: absolute;
            top: 0;
            left: 0;
            background: #ddd;
            box-sizing: border-box;
            border-right: 1px solid #fff;
        }
        .hover-zt {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            overflow: hidden;
            transition: all 0.35s ease-in;
            -webkit-transition: all 0.35s ease-in;
        }
        .hover-zt:hover{
            box-shadow: 0px 0px 10px #ccc;
            z-index: 66;
        }
        .products-main-right{
            width: 50%;
            padding-bottom: 50%;
            position: absolute;
            top: 0;
            left: 50%;
            box-sizing: border-box;
            border-left: 1px solid #fff;
            .pro-second{
                width: 50%;
                padding-bottom: 50%;
                position: absolute;
                top: 0;
                left: 0;
                box-sizing: border-box;
                border-right: 1px solid #fff;
                background: #ccc;
            }
            .pro-third {
                width: 50%;
                padding-bottom: 50%;
                position: absolute;
                top: 0;
                left: 50%;
                box-sizing: border-box;
                border-left: 1px solid #fff;
                background: #ddd;
            }
            .pro-forth {
                width: 100%;
                height: 50%;
                position: absolute;
                left: 0;
                top: 50%;
                box-sizing: border-box;
                border-top: 2px solid #fff;
                background: #eee;
            }
        }
    }
}
.community {
    width: 100%;
    background: #333;
    overflow: hidden;
    text-align: center;
    padding-bottom: 40px;
    h2 {
        font-family: 'avantgardeextlititcregular'; 
        font-size: 72px;
        text-align: center;
        color: #aaa;
        text-transform: uppercase; 
        line-height: 130px;
        position: relative;
        display: inline-block;
        span {
            font-family: 'folio_bk_btbook';
            color: #fff;
            font-weight: bold;
        }
        &::before{
            position: absolute;
            width: 220px;
            height: 1px;
            background: #fff;
            left: -240px;
            top: 50%;
            content: '';
        }
        &::after{
            position: absolute;
            width: 220px;
            height: 1px;
            background: #fff;
            right: -240px;
            top: 50%;
            content: '';
        }
    }
    .community-main {
        max-width: 1221px;
        margin: 0 auto;
        position: relative;
        h3 {
            width: 100%;
            text-align: center;
            line-height: R(40);
        }
        .community-news,.community-blog {
            width: 49.5%;
            padding-bottom: 24.7%;
            float: left;
            background: #fff;
            position: relative;
            .community-main-img {
                width:50%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .community-main-describe {
                width:50%;
                height: 100%;
                float: left;
                position: absolute;
                top: 0;
                left: 50%;
                flex-wrap: wrap;
                -webkit-flex-wrap: wrap;
                font-family: 'avantgardeextlititcregular'; 
                h4 {
                    width: 100%;
                    height: 80px;
                    line-height: 80px;
                    text-align: left;
                    box-sizing: border-box;
                    padding: 0 12px;   
                    font-size: r(36);
                }
                p {
                    text-align: left;
                    font-size: r(28);
                    color: #666;
                    box-sizing: border-box;
                    padding-left: 12px;
                    padding-right: 12px;
                }
            }
            
        }
        .community-blog {
            margin-left: 1%;
        }
    }
}
.about {
    max-width: 1221px;
    margin: 0 auto;
    overflow: hidden;
    padding-top: 40px;
    padding-bottom: 40px;
    .about-main {
        width: 100%;
        padding-bottom: 36%;
        background: #f0f0f0;
        position: relative;
        .about-img {
            width: 50%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            img {
                width: 100%;
                height: 100%;
            }
            &:hover{.vido_play {border-radius:50%;}}
            &:hover{.vido_play::before{opacity:0;}}
            &:hover{.vido_play::after{opacity:1;}}
        }
        .vido_play{ 
            width:18%; 
            height:24.5%; 
            position:absolute; 
            top:36%; 
            left:36.5%;
            border-radius:40%; 
            border:2px solid #fff;
            transition:border-radius 0.5s ease-out;
            -webkit-transition:border-radius 0.5s ease-out;
            cursor:pointer;
            }
        .vido_play::before{	
            width: 50%;
            height: 50%;
            position:absolute;
            top:25%;
            left:28%;
            background:url(../img/mcnew_40.png) top left no-repeat;
            background-size:100%;
            content:'';
            z-index:1;
            opacity:1;
            transition:opacity 0.5s ease-out;
            -webkit-transition:opacity 0.5s ease-out;
            }
        .vido_play::after{	
            width: 50%;
            height: 50%;
            position:absolute;
            top:25%;
            left:28%;
            background:url(../img/mcnew_40a.png) top left no-repeat;
            background-size:100%;
            content:'';
            z-index:2;
            opacity:0;
            transition:opacity 0.5s ease-out;
            -webkit-transition:opacity 0.5s ease-out;
            }
        .about-text {
            width: 50%;
            height: 100%;
            position: absolute;
            left: 50%;
            top: 0;
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
            -webkit-flex-wrap: wrap ;
            -ms-flex-wrap: wrap ;
            flex-wrap: wrap ;
            .about-text-main {
                box-sizing: border-box;
                padding-left: 10%;
                padding-right: 10%;
                h3,p {
                    font-family: 'avantgardeextlititcregular';
                    font-size: r(60);
                    color: #333;
                    margin-bottom: r(24);
                    span {
                        font-family: 'folio_bk_btbook';
                        color: #333;
                        font-weight: bold;
                    }
                }
                p{
                    font-size: r(32);
                    line-height: r(42);
                }
            }
        }
    }
}
.foot {
    width: 100%;
    background: #333;
    text-align: left;
    .foot-main {
        max-width: 1221px;
        margin: 0 auto;
        padding: 50px 0;
        ul {
            color: #fff;
            width: 100%;
            margin-top: 30px;
            &:first-child {
                margin-top: 0;
            }
            h5 {
                font-size: 18px;
                color: #fff;
                margin-bottom: 24px;
            }
            a {
                color: #d0d0d0;
                font-size: 14px;
                line-height: 20px;
                cursor: pointer;
                &:hover{
                    color: #6293af;
                }
            }
            li {
                position: relative;
                &:last-child{
                    margin-bottom: 24px;
                }
                input {
                    width: 100%;
                    border: 1px solid #fff;
                    background: none;
                    height: 48px;
                    line-height: 48px;
                    font-size: 18px;
                    padding-left: r(102);
                    box-sizing: border-box; 
                    color: #fff;  
                }
                button {
                    position: absolute;
                    right: 0px;
                    top: 0;
                    border: none;
                    height: 48px;
                    background: #fff;
                    width: 64px;
                    cursor: pointer;
                }
            }
            li.foot-email{
                &::before{
                    position: absolute;
                    content: '';
                    top: 0;
                    left: 0;
                    width: 78px;
                    height: 48px;
                    background: url(../img/kwimg09.png) center no-repeat;
                }
            }
        }
        ol {
           li {
               float: left;
               margin-right: 6px;
               cursor: pointer;
               .icon {
                   font-size: 28px;
                   color: #fff;
                   margin-right: 12px;
                   &:hover{
                   color: #6293af;
                   }
               } 
           } 
        }
    }
}
//Privacy Policy
.Privacy{
    max-width: 1280px;
    margin: 0 auto;
    .Privacy_main{
        width:94%; 
        margin:3%; 
        color:#333;
        a{
            color:#acce22;
        }
        h2 {
            font-size:30px; 
            text-align:center; 
            line-height:32px; 
            margin-bottom:24px;
        }
        p {
            font-size:16px; 
            color:#333; 
            line-height:24px;
        }
        h3 {
           font-size:18px;
           margin:24px 0 6px 0; 
           color:#000;
        }
        h4 {
            font-size:18px; 
            margin:12px 0;
        }
        ul {
            margin-left:24px; 
            margin-top:12px; 
            margin-bottom:16px; 
            line-height:20px; 
            font-size:14px; 
            color:#666;
            li {
                list-style-type: disc; 
            }
        }
    }
}

// support 页面样式
.kw-support {
    width: 100%;
    background: #eee;
    overflow: hidden;
    .support-banner {
        width: 2560px;
        height: 450px;
        text-align: center;
        position: relative;
        left: 50%;
        margin-left: -1280px;
        background: #e5e6eb;
        h4 {
            text-align: center;
            color: #fff;
            font-size: r(64);
            padding-top: 80px;
        }
    }
    .support-main{
        max-width: 1221px;
        margin: 0 auto;
        padding: 0;
        margin-top: r(80);
        ul {
            li {
                text-align: center;
                &>div {
                    background: #fff;
                    padding-top: r(120);
                    padding-bottom: r(120);
                    transition: all 0.5s ease;
                    -webkit-transition: all 0.5s ease;
                    cursor: pointer;
                    &:hover {
                        -webkit-transform: scale3d(1.02, 1.02, 1);
                        transform: scale3d(1.02, 1.02, 1);
                        box-shadow: 0 0 30px rgba($color: #000000, $alpha: 0.15);
                    }
                }
                .icon {
                    font-size: r(60);
                    color: #333;
                }
                p {
                    font-size: r(24);
                    margin-top: r(24);
                    font-family: 'avantgardeextlititcregular';
                }
                &:first-child {
                    .icon{
                        font-size: r(54);
                    }
                }
            } 
        }
    }
    .support-more {
        max-width: 1221px;
        margin: 0 auto;
        padding-top: r(80);
        padding-bottom: r(80);
        h4 {
            color: #000;
            font-size: r(24);
            font-weight: bold;
            line-height: r(32)
        }
        input {
            width: 100%;
            height: r(48);
            border: 1px solid #cccccc;
            background: none;
            padding-left: r(12);
            box-sizing: border-box;
        }
        button {
            position: absolute;
            right: 0;
            top: 0;
            background: #333;
            width: r(72);
            height: r(48);
            border: none;
            color: #fff;
            font-size: 24px;
            line-height: 18px;
            cursor: pointer;
        }
        .support-more-rr {
            ul li {
                float: left;
                font-size: r(24);
                color: #7e7e7e;
                padding: r(12);
            }
        }
    }
    .support-faq {
        max-width: 1221px;
        margin: 0 auto;
        margin-top: r(48);
        margin-bottom: r(48);
        .support-faq-l {
            position: relative;
           .pro-bx {
               padding-bottom: 100%;
               background: #FCC;
               position: relative;
               img {
                   position: absolute;
                   top: 0;
                   left: 0;
                   width: 100%;
                   height: 100%;
               }
           }
           p {
               width: 100%;
               line-height: r(80);
               height: r(80);
               background: #333;
               color: #fff;
               text-align: center;
               font-size: r(28);
               position: relative;
               padding-right: r(80);
               box-sizing: border-box;
               cursor: pointer;
               span {
                   width: r(80);
                   height: r(80);
                   position: absolute;
                   right: 0;
                   top: 0;
                   background: #80b82f;
                   color: #fff;
                   font-size: r(32);
               }
               &::after{
                font-family:"iconfont-kw";
                content: '\e627';
                width: r(80);
                height: r(80);
                position: absolute;
                right: 0;
                top: 0;
                background: #80b82f;
                color: #fff;
                font-size: r(32);
               }
           } 
        }
        .support-faq-r {
            .faq-aq-box{
                ul {
                    display: none;
                    background: #fff;
                    padding: 24px;
                    padding-top: 48px;
                    padding-bottom: 48px;
                    h2 {
                        font-size: r(48);
                        line-height: r(48);
                        margin-bottom: r(18);
                    }
                    h4 {
                        font-family: 'avantgardeextlititcregular';
                        font-size: r(38);
                        line-height: r(56);
                        position: relative;
                        box-sizing: border-box;
                        padding-right: r(56);
                        cursor: pointer;
                        &::after {
                            position: absolute;
                            top: 0;
                            right: 0;
                            width: r(56);
                            height: r(56);
                            content: '﹥';
                            color: #333;
                            font-size: r(48);
                        }
                    }
                    .answer {
                        margin-bottom: r(24);
                        color: #999;
                        font-size: r(24);
                        display: none;
                    }
                }

            }
            .faq-pro-box {
                width: 100%;
                display: none;
                .faq-pro-control {
                 width: r(40);
                 height: r(40);
                 text-align: center;
                 line-height: r(40);
                 color: #333;
                 font-size: r(46);
                 position: absolute;
                 top: r(28);
                 right: r(30);
                 z-index: 6;
                 cursor: pointer;
                }
                ul {
                    background: #fff;
                    li{
                        box-sizing: border-box;
                        margin-bottom: r(16);
                        cursor: pointer;
                        img {
                            width: 100%;
                        }
                        p {
                            width: 100%;
                            text-align: center;
                            font-size: r(28);
                        }
                    }
                }
                &::after {
                    content: '';
                    width: 100%;
                    clear: both;
                }
            }
        }
        .box-entrance {
            animation: fadeInLeft 0.2s ease-in both;
            -webkit-animation: fadeInLeft 0.2s ease-in both;
        }
        .box-exit {
            animation: fadeOutLeft 0.2s ease-in both;
            -webkit-animation: fadeOutLeft 0.2s ease-in both;
        }
    }
    .support-download {
        max-width: 1221px;
        margin: 0 auto;
        .support-download-menu {
            text-align: center;
            padding-bottom: r(32);
            svg {
                font-size: r(78);
                color: #666;
                cursor: pointer;
                padding-top: r(60);
            }
            p {
                font-family: 'avantgardeextlititcregular';
                font-size: r(28);
                color: #999;
                line-height: r(80);
                font-weight: bold;
            } 
        }
        .support-download-pro {
            padding-bottom: r(36);
            ul {
                display: none;
            }
            img {
                width: 100%;
            }
            p {
                width: 100%;
                text-align: center;
                height: r(60);
                line-height: r(60);
                font-size: r(24);
                margin-bottom: r(24);
                background: #e0e0e0;
                color: #333;
            }
        }
        .box-entrance {
            animation: fadeInDown 0.2s ease-in both;
            -webkit-animation: fadeInDown 0.2s ease-in both;
        }
        .box-exit {
            animation: fadeOutDown 0.2s ease-in both;
            -webkit-animation: fadeOutDown 0.2s ease-in both;
        }
    }
    .support-contact {
        max-width: 1221px;
        margin: 0 auto;
        .contact-p1 {
            width: 100%;
            padding-top: r(24);
            ul {
                li {
                    h4 {
                        font-size: r(28);
                        color: #333;
                        line-height: r(32);
                        margin-bottom: r(24); 
                    }
                    .send-mail {
                        width: 100%;
                        height: r(42);
                        position: relative;
                        input {
                            height: r(42);
                            width: 100%;
                            position: absolute;
                            border:1px solid #333; 
                            background: none;
                            box-sizing: border-box;
                            padding-right: r(160);
                            padding-left: r(12);
                        }
                        button {
                            width: r(160);
                            position: absolute;
                            right: 0;
                            top: 0;
                            background: #333;
                            color: #fff;
                            height: r(42);
                            line-height: r(42);
                            border: none;
                            cursor: pointer;
                        }
                    }
                }
            }
        }
        .contact-p2 {
            width: 100%;
            margin-top: r(20);
            p {
                text-align: left;
                font-size: r(24);
                float: left;
                line-height: r(32);
                width: 100%;
            }
        }
        .contact-p3 {
            width: 100%;
            margin-top: r(40);
            margin-bottom: r(28);
            h4 {
                font-size: r(28);
                margin-bottom: r(24);
            }
            p {
                text-align: left;
                font-size: r(24);
                float: left;
                line-height: r(32);
                width: 100%;
            }
        }    
    }
    .contact-p4 {
        width: 100%;
        background: #adadad;
        padding-top: r(48);
        padding-bottom: r(48);
        .contact-p4-main {
            max-width: 1221px;
            margin: 0 auto;
            color: #fff;
            font-size: r(24);
            p {
                margin-bottom: r(58);
            }
            ul{
                width: 100%;
                display: inline-block;
                padding-left: r(220);
                box-sizing: border-box;
                li {
                    width: 100%;
                    position: relative;
                   h5 {
                        width: r(200);
                        position: absolute;
                        top: 0;
                        left: r(-220);
                        background: #adadad;
                    }
                    input,textarea {
                        width: 100%;
                        height: r(56);
                        border: 1px solid #fff;
                        background: none;
                        margin-bottom: r(24);
                        box-sizing: border-box;
                        line-height: r(56);
                        padding-left: r(24);
                        padding-right: r(24);
                    }
                    textarea {
                        height: r(250);
                        box-sizing: border-box;
                        padding: r(24);
                        line-height: r(28);
                    }
                    button {
                        background: #333;
                        color: #fff;
                        width: r(200);
                        font-size: r(28);
                        height: r(58);
                        line-height: r(58);
                        border: none;
                        cursor: pointer;
                    } 
                }
            } 
        }
    }
    .support-buy {
        max-width: 1221px;
        margin: 0 auto;
        padding-top: r(80);
        padding-bottom: r(160);
        img {
            width: 100%;
        }
    }
}

//sulution 
.kw-sulution {
    width: 100%;
    .sulution-banner {
        max-width: 1920px;
        margin: 0 auto;
        img {
            width: 100%;
        }
    }
    .solution-main {
        max-width: 1220px;
        margin: 0 auto;
        h3 {
            font-family: 'avantgardeextlititcregular';
            font-size: r(64);
            text-align: center;
            margin-top: r(120);
            margin-bottom: r(60);
        }
        .solution-part1 {
            overflow-x:auto;
            .part1-main {
                width: 1219px;
                overflow: hidden;
                .part1-top {
                width: 100%;
                text-align: center;
                li {
                    width: 25%;
                    h4 {
                        font-family: Arial, Helvetica, sans-serif;
                        font-size: r(32);
                        color: #7dc4ef;
                        margin-bottom: r(12);
                    }
                    p {
                        font-size: 16px;
                        color: #91dafd;
                        margin-bottom: r(36); 
                    }
                }
            }
            .part1-container {
                width: 100%;
                overflow: hidden;
                ul {
                    width: 14.28%;
                    float: left;
                    li {
                        width: 100%;
                        float: left;
                        font-size: r(24);
                        color: #666;
                        margin-bottom: r(12);
                        &:first-child {
                            border-bottom: 1px dashed #118ed8;
                            font-size: r(26);
                            padding-bottom: r(18);
                            margin-bottom: r(18);
                            color: #333;
                        }
                    }
                }
            }
            } 
            
        }
        .solution-part2 {
            width: 100%;
            margin-top: r(120);
            margin-bottom: r(20);
            img {
                width: 100%;
            }
        }
        .solution-part3 {
            overflow: hidden;
            ul {
                width: 100%;
                overflow: hidden;
                li {
                    text-align: center;
                    width: 32%;
                    margin-right: 2%;
                    float: left;
                    h5 {
                        font-family: Arial, Helvetica, sans-serif;
                        font-size: r(28);
                        margin-bottom: r(18);
                    }
                    p {
                        font-size: r(24);
                        line-height: r(28);
                        margin-bottom: r(24);
                        box-sizing: border-box;
                    }
                    img {
                        width: 100%;
                    }
                    &:last-child {
                        margin-right: 0;
                    }
                }
            }
        }
        .solution-part4 {
            h3 {
                margin-bottom: r(12);
            }
            &>p {
                width: 80%;
                margin-left: 10%;
                text-align: center;
                font-size: r(24);
                color: #999999;
                margin-bottom: r(88);
            }
            ul {
                width: 100%;
                overflow: hidden;
                li {
                    float: left;
                    width: 25%;
                    div {
                        width: 60%;
                        margin-left: 20%;
                        border: 1px solid #b5b5b5;
                        border-radius: 100%;
                        padding-bottom: 60%;
                        position: relative;
                        img {
                            position: absolute;
                            width: 80%;
                            top: 10%;
                            left: 10%;
                        }
                    }
                    p {
                        width: 100%;
                        text-align: center;
                        font-size: r(24);
                        margin-top: r(12);
                        line-height: r(48);
                    }
                }
            }
            .p4-list {
                margin-top: r(60);
                background: #ebecf0;
                li {
                    box-sizing: border-box;
                    padding: 12px;
                    img {
                        width: 100%;
                    }
                }
            }
        }
        .solution-part5 {
            ul {
                width: 100%;
                overflow: hidden;
                li {
                    width: 24.25%;
                    height: 200px;
                    float: left;
                    margin-right: 1%;
                    box-sizing: border-box;
                    padding-left: 12px;
                    padding-right: 12px;
                    background: #ebecf0;
                    border-top: 4px solid #333;
                    &:last-child {
                        margin-right: 0;
                    }
                    p {
                        font-family: 'avantgardeextlititcregular';
                        font-size: r(24);
                    }
                }
            }
            .part5-main {
                width: 100%;
                margin-top: r(25);
                margin-bottom: r(10);
                .swiper-slide {
                    width: auto;
                }  
            }
             
        }
        .solution-part6 {
            .cert-main {
                width: 100%;
                margin: 0 auto;
                ul {
                    li {
                        width: 20%;
                        box-sizing: border-box;
                        padding: 5px;
                        float: left;
                        img {
                            width: 100%;
                        }
                    }
                }
            }
        }
        .solution-part7 {
            h3 {
                margin-bottom: r(12);
            }
            &>p {
                width: 80%;
                margin-left: 10%;
                text-align: center;
                font-size: r(24);
                color: #999999;
                margin-bottom: r(88);
            }
            img {
                width: 100%;
            }
        }
        .solution-part8 {
            text-align: center;
            .contact-main {
                width: 100%;
                max-width: 750px;
                margin: 0 auto;
                text-align: left;
                overflow: hidden;
                h4 {
                    font-size: 18px;
                    color: #0085d1;
                    line-height: 60px;
                    width: 96%;
                    margin-left: 2%;
                    border-bottom: 1px solid #eee;
                }
                p {
                   padding: 10px 12px;
                   font-size: 16px;
                    span {
                        margin-right: 12px;
                    }
                }
                .left,.right {
                    width: 50%;
                    float: left;
                    
                    background: #f8f8f8;
                }
                .left{
                    box-sizing: border-box;
                    border-right: 1px solid #eee;
                }
            }
        }
        .solution-part9 {
            margin-top: r(120);
            margin-bottom: r(80);
            .contact-p9-main {
                max-width: 1221px;
                margin: 0 auto;
                color: #333;
                font-size: r(24);
                p {
                    margin-bottom: r(58);
                }
                ul{
                    width: 100%;
                    display: inline-block;
                    padding-left: r(220);
                    box-sizing: border-box;
                    li {
                        width: 100%;
                        position: relative;
                       h5 {
                            width: r(200);
                            position: absolute;
                            top: 0;
                            left: r(-220);
                        }
                        input,textarea {
                            width: 100%;
                            height: r(56);
                            border: 1px solid #999;
                            background: none;
                            margin-bottom: r(24);
                            box-sizing: border-box;
                            line-height: r(56);
                            padding-left: r(24);
                            padding-right: r(24);
                        }
                        textarea {
                            height: r(250);
                            box-sizing: border-box;
                            padding: r(24);
                            line-height: r(28);
                        }
                        button {
                            background: #333;
                            color: #fff;
                            width: r(200);
                            font-size: r(28);
                            height: r(58);
                            line-height: r(58);
                            border: none;
                            cursor: pointer;
                        } 
                    }
                } 
            }
        }
    }
}

// products 页面样式
.kw-products {
    width: 100%;
    .kw-products-main {
        max-width: 1221px;
        margin: 0 auto;
        .kw-products-new {
            .kw-products-new-img {
                position: relative;
                .kw-products-new-imgbox{
                    width: 100%;
                    padding-bottom: 51%;
                    position: relative;
                    img {
                        width: 100%;
                        height: 100%;
                        position: absolute;
                        top: 0;
                        left: 0;
                    } 
                }           
            }
            .kw-products-new-desc {
                position: relative;
                .kw-products-new-descboxout {
                    padding-bottom: 102%;
                    width: 100%;
                    position: relative;

                    .kw-products-new-descboxinner {
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        background: #fff url(../img/kw-icon-new.png) top right no-repeat;
                        font-family: 'avantgardeextlititcregular';
                        display: -webkit-box;
                        display: -ms-flexbox;
                        display: -webkit-flex;
                        display: flex;
                        -webkit-box-pack: center;
                        -ms-flex-pack: center;
                        -webkit-justify-content: center;
                        justify-content: center;
                        -webkit-box-align: center;
                        -ms-flex-align: center;
                        -webkit-align-items: center;
                        align-items: center;
                        -webkit-flex-wrap: wrap ;
                        -ms-flex-wrap: wrap ;
                        flex-wrap: wrap ;
                        box-sizing: border-box;
                        padding: r(32);
                        h4{
                            font-size: r(72);
                            margin-bottom: r(24);
                        }
                        p {
                            font-size: r(36);
                            line-height: r(42);
                            margin-bottom: r(12);
                        }
                        a {
                            display: inline-block;
                            font-size: r(28);
                            margin-top: r(32);
                            color: #a7bae4;
                        }
                    }
                }
            }

        }
        .kw-products-all {
            padding-bottom: r(36);
            img {
               width: 100%;  
           }
           dl {
               margin-top: r(56);
               dt {
                   font-size: r(36);
                   line-height: r(64);
                   text-transform: uppercase;
               }
               dd {
                   .pro-img {
                       padding-bottom:60%;
                       position: relative;
                       img {
                           position: absolute;
                           top: 0;
                           left: 0;
                           width: 100%;
                           height: 100%;
                       }
                    }
                    .pro-desc {
                        background: #fff;
                        box-sizing: border-box;
                        padding: r(24);
                        position: relative;
                        h3 {
                            font-size: r(28);
                            line-height: r(36);
                            margin-top:r(24);
                            height: r(36);
                            margin-bottom: r(6); 
                        }
                        p {
                            font-size: r(24);
                            line-height: r(28);
                            color: #999;
                            height: r(56);
                            width: 80%;
                            margin-bottom: r(24);
                        }
                        a {
                            position: absolute;
                            font-size: r(24);
                            right: r(24);
                            bottom:r(24);
                            color: #e28989;
                        }
                    }
               }
           } 
        }
    }
}

// about-us 页面样式
.kw-about-us {
    font-family: 'avantgardeextlititcregular';
    .kw-about-main {
        overflow-x: hidden;
        .banner-about-us {
            width: 1920px;
            left: 50%;
            margin-left: -960px;
            position: relative;
        }
        dl {
            padding-bottom: 48px;
            dd>h4 {
                text-align: center;
                font-size: 48px;
                line-height: 160px;
            }
            .abpart-01 {
                margin-top: 80px;
                text-align: center;
                h4 {
                    position: relative;
                    padding-top: r(140);
                    &::after{
                        width: 100%;
                        height: 100%;
                        position: absolute;
                        top: 0;
                        left: 0;
                        content: '';
                        background:url(../img/about-icon01.png) top center no-repeat;
                    }
                }
                &>p {
                   font-size: 24px;
                    line-height: 30px;
                    width: 672px;
                    color: #000; 
                    display: inline-block;
                }
                .abpart-01main {
                    max-width: 1221px;
                    margin: 0 auto;
                    position: relative;
                    ul {
                        background: #fff;
                        margin-top: r(136);
                        li {
                            img {
                                width: 100%;
                            }
                            p {
                                margin-top: 20px;
                                width: 100%;
                                display: block;
                                box-sizing: border-box;
                                padding: 15px;
                                color: #000;
                                font-size: r(28);
                                line-height: r(30);
                                text-align: left;
                            }
                        }
                    }  
                }
                
            }
            .abpart-02{
                max-width: 1221px;
                margin: 0 auto;
                .video-box {
                    width: 100%;
                    video {
                        width: 100%;
                    }
                }
            }
            .abpart-03 {
                .brand-box {
                    max-width: 1221px;
                    margin: 0 auto;
                    .desc-box {
                        background: #fff;
                        height: 180px;
                        box-sizing: border-box;
                        padding: 15px; 
                        h5 {
                            font-size:30px; 
                            line-height: 46px;
                            margin-top: 22px;
                        }
                        p {
                            font-size: 24px;
                            line-height: 30px;
                        }
                    }
                   
                    .img-box {
                        img {
                            width: 100%;
                        }
                    }
                }
            }
            .abpart-04 {
                .time-event {
                    max-width: 1200px;
                    height: 220px;
                    margin: 0 auto;
                    position: relative;
                    box-sizing: border-box;
                    padding-left: 10%;
                    padding-right: 10%;
                }
                .time-line {
                    width: 76%;
                    height: 1px;
                    background: #333;
                    position: absolute;
                    top: 100px;
                    left: 12%;
                }
                .swiper-container {
                    width: 94%;
                    height: 100%;
                    position: absolute;
                    top: 0;
                    left: 3%;
                }
                .swiper-button-prev {
                    left: 0px;
                }
                .swiper-button-next {
                    right: 0px;
                }
                .swiper-slide {
                    text-align: center;
                    font-size: 18px;
            
                /* Center slide text vertically */
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: -webkit-flex;
                    display: flex;
                    -webkit-box-pack: center;
                    -ms-flex-pack: center;
                    -webkit-justify-content: center;
                    justify-content: center;
                    -webkit-box-align: center;
                    -ms-flex-align: center;
                    -webkit-align-items: center;
                    align-items: center;
                    -webkit-flex-wrap: wrap ;
                    -ms-flex-wrap: wrap ;
                    flex-wrap: wrap ;
                }
                .swiper-button-next.swiper-button-black, 
                .swiper-container-rtl .swiper-button-prev.swiper-button-black {
                    background-image: url(../img/about-icon04.png)
                }
                .swiper-button-prev.swiper-button-black, 
                .swiper-container-rtl .swiper-button-prev.swiper-button-black {
                    background-image: url(../img/about-icon03.png)
                }
                #swiper-a {
                    height: 200px;
                    top: 0;
                }
                #swiper-a p {
                    width: 20px;
                    height: 20px;
                    background: #c9c9c9;
                    border-radius: 100%;
                    border: 4px solid #333;
                    position: relative;
                }
                #swiper-a .swiper-slide-active p {
                background: #93cdf6;
                cursor: pointer;
                }
                #swiper-a h6 {
                width: 100%;
                position: absolute;
                top: 10px;
                font-weight: bold;
                font-family: Arial, Helvetica, sans-serif;
                color: #666;
                font-size: 48px;
                line-break: 38px;
                }
                #swiper-b {
                height: 550px;
                background: #efe;
                top: 200px;
                }
                .swiper-button-mine {
                width: 51px;
                height: 101px;
                border-radius: 100%;
                background-size: 51px 101px;
                background-position: 0px 0px;
                color: #000;
                margin-top: -50px;
                }
                #swiper-a .move-box {
                position: absolute;
                top: 140px;
                height: 120px;
                width: 800px;
                font-size: 24px;
                line-height: 30px;
                color: #666;
                }
                #swiper-a .move-text{
                position: absolute;
                top: 120px;
                }              
            }
            .abpart-07 {
                .cert-main {
                    max-width: 1221px;
                    margin: 0 auto;
                    ul {
                        li {
                            width: 20%;
                            box-sizing: border-box;
                            padding: 5px;
                            float: left;
                            img {
                                width: 100%;
                            }
                        }
                    }
                }
            } 
            .team-main {
                max-width: 1221px;
                margin: 0 auto;
                img {
                    width: 100%;
                }
            }
        }
    }
}

@media screen and (max-width:1200px) {
    .banner-nav .banner-inner {
        display: none;
    }
    .banner-nav .nav-menu-mobile-logo {
        display: block;
        width: r(120);
        margin-left: r(20);
        margin-top: r(20);
        img {
            width: 100%;
        }
    }
    .banner-nav .nav-menu-mobile {
        &>ul  {
            li {
                width: 100%;
                margin-left: 0;
                line-height: r(36);
                .nav-pro-img {
                    display: none;
                }
                h4 {
                    font-size: r(36);
                    color: #ccc;
                    border-bottom: 1px solid #2c2c2c;
                    line-height: r(48);
                }
                .nav-add ul li {
                    height: r(42);
                    line-height: r(42);
                    font-size: r(28);
                    padding-left: r(12);
                    color: #999;
                }
                
            }
            #nav-com {
                .nav-com-box {
                    &>a {
                        color: #999;
                        width: 100%;
                        display: inline-block;
                        line-height: r(42);
                        font-size: r(28);
                        padding-left: r(12);
                        box-sizing: border-box;
                    }
                }
            }
        }
    }
    .banner-nav {
        .nav-menu {
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;   
        }
    }
    .header .header-main {
        padding: 0 10px;
    }
    .header .header-main .header-main-left p:first-child::after, 
    .header .header-main .header-main-right p:first-child::after {
        margin-left: 2px;
        margin-right: 2px;
    }
    .header .header-main .header-main-left p, 
    .header .header-main .header-main-right p {
        font-size: r(18);
    } 
    .banner {
        padding-bottom: 66%;
    }
    .banner .swiper-container .swiper-pagination-bullet {
        width: r(40)
    }
    .banner .swiper-container .swiper-slide .slide-container img.banner-pro-a01 {
        width: 48%;
    }
    .banner .swiper-container .swiper-slide .slide-container .descrip01 h3 {
        font-size: r(48);
        margin-bottom: r(20);
        margin-left: r(40);
    }
    .banner .swiper-container .swiper-slide .slide-container .descrip01 p {
        margin-top: r(10);
        margin-left: r(40);
        width: r(440);
    }
    .banner .swiper-container .swiper-slide .slide-container .descrip01 button {
        padding-top: r(10);
        padding-bottom: r(10);
        padding-left: r(30);
        padding-right: r(30);
        margin-top: r(20);
        margin-left: r(40);
    }
    .products {
        padding-top: r(24);
        padding-bottom: r(24);
    }
    .products h2 {
        font-size: r(48);
        line-height: r(80);
    }
    .products h2::before {
        width: r(120);
        left: r(-140);
    } 
    .products h2::after {
        width: r(120);
        right: r(-140);
    }
    .community {
        padding-bottom: r(24);
    }
    .community h2{
        font-size: r(48);
        line-height: r(80);
        margin-top: r(24);
    }
    .community h2::before {
        width: r(160);
        left: r(-180);
    } 
    .community h2::after {
        width: r(160);
        right: r(-180);
    }
    .products .products-main .pro-parta h3 {
        font-size: r(48);
        text-align: left;
    }
    .products .products-main .pro-partb h3,
    .products .products-main .pro-partc h3 {
        font-size: r(28);
        line-height: r(32);
        text-align: left;
    }
    .products .products-main .pro-partd h3 {
        font-size: r(48);
        text-align: left;
    }
    .products .products-main {
        padding-bottom: 192%;
        .products-main-left {
            width: 96%;
            height: 50%;
            top: 0;
            left: 2%;
            border-right: none;
        }
        .products-main-right {
            border-top: 2px solid #fff;
            width: 96%;
            height: 50%;
            top: 50%;
            left: 2%;
            border-left: none;
        }
    }
    .community .community-main .community-news, 
    .community .community-main .community-blog {
        width: 96%;
        padding-bottom: 48%;
        height: 200%;
        margin-left: 2%;
        margin-right: 2%;
    }
    .community .community-main .community-news .community-main-describe h4, 
    .community .community-main .community-blog .community-main-describe h4 {
        font-size: r(32);
        line-height: r(40);
        margin-top: r(9);
        height: r(58);
    }
    .community .community-main .community-news {
        margin-bottom: r(8);
    }
    .community .community-main .community-news .community-main-img, 
    .community .community-main .community-blog .community-main-img {
        height: 100%;
    }
    .about {
        padding-left: 2%;
        padding-right: 2%;
        box-sizing: border-box;
        padding-bottom: r(24);
        padding-top: r(24);
    }
    .about .about-main {
        padding-bottom: 0;
    }
    .about .about-main .about-img {
        width: 100%;
        position: relative;
        padding-bottom: 72%;
        img {
            position: absolute;
            top: 0;
            left: 0;
        }
    }
    .about .about-main .about-text {
        width: 100%;
        position: relative;
        left: 0;
    }
    .about .about-main .about-text .about-text-main h3 {
        line-height: r(80);
        margin-top: r(24);
    }
    .about .about-main .about-text .about-text-main {
        padding-left: 4%;
        padding-right: 4%;
    }
    .foot {
        padding-left: 4%;
        padding-right: 4%;
        padding-top: r(12);
        padding-bottom: r(12);
        box-sizing: border-box;
        .foot-main {
            padding-top: r(24);
            padding-bottom: r(24);
            ul h5 {
                margin-bottom: r(12);
            }
            ul li:last-child {
                margin-bottom: r(12);
            }
        }
        
    }
    .foot .foot-main ul {
        margin-top: 0;
    }
    .foot .foot-main ol {
        margin-top: r(24);
    }
    .foot .foot-main ul li input {
        padding-left: r(128);
    }
    .kw-about-us {
        .kw-about-main {
            dl {
                padding:r(20);
                box-sizing: border-box;
                padding-top: 0; 
            }
        }
    }
    .kw-support {
        box-sizing: border-box;
        padding-left: r(20);
        padding-right: r(20);
       .support-banner {
            width: 200%;
            left: -50%;
            margin-left: 0;
            height: auto;
            img {
                width: 100%;
            }
        } 
    }  
}
@media screen and (max-width:750px) {
    .kw-page {
        .head-container {
            height: 85px;
        }
        .slide-part-head {
            height: 85px;
        }
    }
    
    .banner-nav {
        height: 85px;
    }
    .box-top {
        padding-top: 85px;
    }
    .kw-about-us {
        .kw-about-main {
            .banner-about-us {
                width: 240%;
                left: -70%;
                margin-left: 0;
                img {
                    width: 100%;
                }
            }
            dl {
                dd>h4 {
                    text-align: center;
                    font-size: r(48);
                    line-height: r(120);
                }
                .abpart-01{
                    padding-top: 0;
                    margin-top: r(48);
                    h4 {
                        &::after{
                            background-size: r(240);
                        }
                    }
                    &>P {
                        width: 100%;
                        box-sizing: border-box;
                        padding: r(32);
                        font-size: r(36);
                        line-height: r(42);
                        padding-top: 0;
                        padding-bottom: 0;
                    }
                    .abpart-01main ul {
                        margin-top: r(36);
                        li p{
                            margin-top: 0;
                            font-size: r(36);
                            line-height: r(42);
                        }
                    }
                }
                .abpart-03 {
                    .brand-box{ 
                        .desc-box{
                            height: r(260);
                            h5 {
                                font-size: r(48);
                                line-height: r(56);
                                margin-top: r(24);
                                margin-bottom: r(12);
                            }
                            p {
                                font-size: r(36);
                                line-height: r(42);
                            } 
                        } 
                    } 
                }
                .abpart-04 {
                    .swiper-button-mine {
                        width: r(80);
                        height: r(160);
                        background-size: r(80);
                        margin-top: r(-78);
                    }
                    #swiper-a .move-box {
                        width: r(600);
                        font-size: r(36);
                        line-height: r(42);
                    }
                }
                .abpart-07 {
                    .cert-main ul li {
                        width: 33.33%;
                    }
                }
            }
        }
    }
    
    .kw-sulution {
        .solution-main {
            box-sizing: border-box;
            padding-left: r(20);
            padding-right: r(20);
            h3 {
                font-size: r(48);
                margin-top: r(60);
                margin-bottom: r(30);
            }
            .solution-part2{
                margin-top: r(40);
            }
            .solution-part4{
                ul li p{
                    line-height: r(24);
                }
                .p4-list li {
                    width: 50%;
                }
            } 
            .solution-part5 ul li{
                width: 49%;
            }
            .solution-part8 {
                .contact-main {
                    h4 {
                        font-size: r(32);
                        line-height: r(40);
                    }
                    p {
                        @include setPm(padding,20,5,20,5 );
                        font-size: r(24);
                        line-height: r(32);
                        padding-left: r(80);
                        span {
                            margin-right: r(6);
                            margin-left: r(-80);
                        }
                    }
                } 
            }
        }
    }
}